<template>
	<view class="address">
		<!-- <text class="txt" v-if="!address.length">暂无地址信息</text> -->
    <template v-if="address.length===0">暂无地址</template>
    <template v-else>
      <scroll-view class="scroll-view" scroll-y>
      	<view class="address-info" v-for="(item,index) in address"  :key="index">
      		<view class="info-top">
      			<text class="top-txt">{{item.name}}</text>
      			<text class="top-txt1">{{item.number}}</text>
      		</view>
      		<view class="info-center">
      			<text>地址：{{item.address}}{{item.menpai}}</text>
      		</view>
      		<view class="info-bottom">
      			<view class="bottom-left">
      				<radio value="rad" color="#0f0f0f" :checked="item.flag" @click="changeDefault(item)"/>
      				<text class="bottom-txt">默认联系人</text>
      			</view>
      
      			<view class="bottom-right">
      				<text @click="deleteAddress(item.id)">删除</text>
      				<text @click="edit(item)">编辑</text>
      			</view>
      
      		</view>
      
      	</view>
      </scroll-view>
    </template>
	
		<!-- 添加联系人信息 -->
		<view class="add" @click="add">
			<text>添加联系人信息</text>
		</view>

	</view>
</template>

<script>
	import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem'
	import colorGradient from '../../uni_modules/uview-ui/libs/function/colorGradient'
  import {mapState,mapMutations} from "vuex"
	export default {
		data() {
			return {
				address: [],
				id: 0
			}
		},
    computed:{
      ...mapState("user",["user"])
    },
		// onShow() {
		// 	// this.test()
		// 	uni.getStorage({
		// 		key: "user",
		// 		success: (res) => {
		// 			// console.log(res.data)
		// 			this.address = res.data
		// 		}
		// 	})
		// },
		methods: {
      ...mapMutations("user",["setEditUser"]),
      //改变默认联系人
     async changeDefault(item){
       if(item.flag) return
       const user = uniCloud.importObject("user")
        await user.updateUserDefaultAddress(item.id,this.user._id)
        uni.showToast({
          title:"修改成功",
          icon:"success"
        })
        this.getUserAddressInfo()
      },
      //获取用户的地址信息
     async getUserAddressInfo(){
        const user = uniCloud.importObject("user")
        const {data:res} = await user.getUserById(this.user._id)
        this.address = res[0].addressInfo
      },
			add(event) {
				// console.log(1)
				uni.navigateTo({
					url: '/my/my-address-add/my-address-add'
				})
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
      //删除地址
		async	deleteAddress(id) {
     const result = await uni.showModal({
        title:"提示",
        content:"您确定要删除",
      })
      //确定删除
      if(result.confirm){
        const user = uniCloud.importObject("user")
        const {data:res} = await user.deleteAddress(this.user._id,id)
        console.log(res);
        uni.showToast({
          title:"删除成功",
          icon:"success"
        })
        this.getUserAddressInfo()
      }
			},

			edit(item) {
        this.setEditUser(item)
				uni.navigateTo({
					url: `/my/my-address-add/my-address-add`
				})

			}


		},
    created() {
      this.getUserAddressInfo()
    }
	}
</script>

<style lang="scss" scoped>
	.address {
		width: 100%;
		height: 100%;
		position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


		.add {
			color: #fff;
			background-color: #000;
			width: 90%;
			height: 5%;
			// border: 1rpx solid #000;
			position: fixed;
			bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 5%;
		}

		.scroll-view {
      position: absolute;
			height: 92%;
      top: 0;
      padding: 10rpx 0;
			// background-color: red;



			.address-info {
				border: 1rpx solid #000;
				height: 250rpx;
				width: 90%;
				margin-left: 5%;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.info-top {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.top-txt {
						font-size: 30rpx;
						font-weight: 600;
						letter-spacing: 6rpx;
						margin-left: 20rpx;
					}

					.top-txt1 {
						font-size: 30rpx;
						font-weight: 300;
						letter-spacing: 3rpx;
						margin-right: 20rpx;
					}
				}
			}

			.info-center {
				font-size: 25rpx;
				letter-spacing: 2rpx;
				width: 94%;
				margin-left: 3%;
				color: #737373;
				border-bottom: 1rpx solid #737373;
				padding-bottom: 20rpx;
				box-sizing: border-box;
			}

			.info-bottom {
				width: 94%;
				margin-left: 3%;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;

				.bottom-txt {
					font-size: 25rpx;
					letter-spacing: 2rpx;
					margin-left: 10rpx;
					color: #737373;
				}

				.bottom-right {
					// border: 1rpx solid red;
					width: 130rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 25rpx;
					letter-spacing: 2rpx;
					// margin-left: 10rpx;
					color: #737373;
				}
			}
		}

	}
</style>